<template>
  <div class="good-manager  wap">
    <div>
      <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}"><span>商品管理</span>
        <div class="overwrite-title-right" slot="right" @click="goGoodCategory">商品分类</div>
      </x-header>
      <div class="display-flex search-content align-items-center">
        <group class="flex-1">
          <x-input @keyup.enter.native="showSearch" v-model="searchKey" type="text" :show-clear="false"
                   :placeholder="searchIcon"></x-input>
        </group>
        <div @click="showSearch" class="btn-search">搜索</div>
      </div>

      <tab active-color="#527DD9" custom-bar-width="0.87rem">
        <tab-item selected @on-item-click="onItemClick(0)">在售商品</tab-item>
        <tab-item @on-item-click="onItemClick(6)">库存<=20</tab-item>
        <tab-item @on-item-click="onItemClick(1)">库存=0</tab-item>
        <tab-item @on-item-click="onItemClick(2)">销售=0</tab-item>
        <tab-item @on-item-click="onItemClick(3)">未上架/下架</tab-item>
      </tab>
    </div>

    <div class="main list">

      <scroller
        ref="scroll"
        :on-refresh="refresh"
        :noDataText="this.$noData(goodList)"
        :on-infinite="infinite">
        <div>
          <div v-show="goodList&&goodList.length>0">
            <goodMangerItem :erpStatus="erpStatus" :currentIndex="currentIndex" @refeshData="refeshData" :list="goodList"
            ></goodMangerItem>
          </div>


        </div>
      </scroller>
      <!--<no-data v-show="loadOk" @refreshData="refresh(0)" :list="goodList"></no-data>-->
      <div v-show="loadOk" v-if="goodList.length==0" style="text-align: center;color:#999;margin-top: .2rem;">暂无商品</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import goodMangerItem from '../../components/good-manager-item.vue'
  import searchPop from '../../components/search-pop.vue'

  export default {
    components: {
      goodMangerItem,
      searchPop
    },
    data() {
      return {
        searchIcon: '\ue630 请输入商品名称查找商品',
        page: 0,
        currentIndex: 0,
        searchKey: '',
        goodList: [],
        path: "",
        loadOk: false,
        isShow: false,
        shareData: '',
        positionArr: [],
        isScroll:true,
        erpStatus: 1
      }
    },
    created() {
      this.$ajax.get('user/info', res => {
        console.log("user/info", res);
        this.erpStatus = res.data.erpStatus
      }, {});
    },
    mounted() {
      this.$nextTick(() => {
        this.currentIndex = parseInt(this.$route.query.currentIndex) || 0;
        this.$refs.scroll && this.$refs.scroll.finishInfinite(true);
        this.page=1;
        this.initData(0);
      })
      window['androidCallJs'] = this.androidCallJs;
      this.positionArr[this.currentIndex] = this.$refs.scroll.getPosition();
      document.getElementsByClassName('main')[0].addEventListener('touchmove',this.touchMoveScroll,false)
    },
    destroyed(){
      document.getElementsByClassName('main')[0].removeEventListener('touchmove',this.touchMoveScroll,false)
    },
    methods: {
      touchMoveScroll(){
        this.isScroll=false;
        setTimeout(()=>{
          this.isScroll=true;
        },3000)
      },
      androidCallJs(val) {
        try {
          if (val) {
            val = decodeURIComponent(val.replace(/\+/g, '%20'));
            let obj = JSON.parse(val);
            console.log("===val", obj);
            if (obj) {
              if (obj.code == 1017) {
                let priceSetting = obj.priceSetting//价格设置监听
                let stock = obj.stock//库存设置监听
                for (let i = 0; i < this.goodList.length; i++) {
                  if (priceSetting && this.goodList[i].id == priceSetting.goodsId) {
                    this.goodList[i].enquiry = priceSetting.enquiry;
                    this.goodList[i].categoryPrices = priceSetting.priceParams;
                    this.$set(this.goodList, i, this.goodList[i]);
                    break;
                  }
                  console.log("===stock", stock);
                  if (stock != undefined && this.goodList[i].id == obj.goodsId) {
                    console.log("====XXX");
                    this.goodList[i].goodsStock = stock;
                    this.$set(this.goodList, i, this.goodList[i]);
                    break;
                  }
                }

              } else {
                obj = this.$getJsonAndroidOrIOS(obj, "goodBeanJson");
                let goodId = obj.id;
                if (goodId > 0) {
                  for (let i = 0; i < this.goodList.length; i++) {
                    if (this.goodList[i].id == goodId) {
                      this.goodList[i].brandName = obj.brandName;
                      this.goodList[i].name = obj.name;
                      this.goodList[i].detail = obj.detail;
                      this.goodList[i].spec = obj.specNum + "/包" + obj.rate + "/件";
                      this.goodList[i].defaultPhoto = obj.pics[0];
                      this.$set(this.goodList, i, this.goodList[i]);
                      break;
                    }
                  }
                }
              }
            }
          }
        } catch (e) {

        }
      },
      initData(type,done,isTab) {
        this.$ajax.get("goods/list", (res) => {
          if (res.code == 200) {
            if (res.data && res.data.length > 0) {
              if(this.page==1){
                this.goodList =res.data;
              }else{
                this.goodList = this.goodList.concat(res.data);
              }
            }
            if (typeof(done) == "function") {
              done();
            }
            this.$refs.scroll && this.$refs.scroll.finishPullToRefresh();
            if (res.data && res.data.length < this.$rows || res.data == undefined||!res.data) {
              this.$refs.scroll && this.$refs.scroll.finishInfinite(true);
            }
            if(this.positionArr[this.currentIndex]&& this.positionArr[this.currentIndex].top>0&&this.isScroll){
              setTimeout(()=>{
                this.$refs.scroll.scrollTo(0,  this.positionArr[this.currentIndex].top, true)
              },100)
            }
          } else {
            this.$refs.scroll && this.$refs.scroll.finishPullToRefresh();
            this.$refs.scroll && this.$refs.scroll.finishInfinite(false);
          }
          this.loadOk = true;
        }, {pageNo: this.page, pageSize: this.$rows, type: this.currentIndex, searchKey: this.searchKey});
      },
      refresh() {
        console.log("====fresh");
        this.positionArr[this.currentIndex]=undefined;
        this.page = 1;
        this.goodList = [];
        this.$refs.scroll && this.$refs.scroll.finishInfinite(false);
        this.initData(0)
      },
      infinite(done) {
        console.log("====infinite");
        this.page++;
        setTimeout(()=>{
          this.initData(1, done);
        },500)
      },
      onItemClick(type) {
        if(this.currentIndex!=type){
          this.positionArr[this.currentIndex] = this.$refs.scroll.getPosition();
        }
        this.goodList = [];
        this.page = 1;
        this.currentIndex = type;
        this.$refs.scroll && this.$refs.scroll.scrollTo(0, 0, false)
        this.$refs.scroll && this.$refs.scroll.finishInfinite(false);

        this.initData(0,null,1)

        let query = this.$router.history.current.query;
        let path = this.$router.history.current.path;
        //对象的拷贝
        let newQuery = JSON.parse(JSON.stringify(query));
        this.$router.push({path, query: {...newQuery, currentIndex: this.currentIndex}});
        this.path = window.location.href;
      },
      goGoodCategory() {
        this.$router.push({path: '/good/category'})
      },
      showSearch() {
        if (this.searchKey.trim().length == 0) {
          this.$vux.toast.text("请输入关键词", 'center');
          return;
        }
        this.positionArr=[];
        this.refeshData()
      },
      refeshData() {
        console.log("====XXXXX");
        this.refresh();
      }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .good-manager {
    .search-content {
      background: #527DD9 !important;
      .btn-search {
        color: #fff;
        padding: .05rem .2rem .05rem .1rem;
        margin-right: .2rem;
        border: 1px solid #ddd;
        border-radius: .1rem;
      }
    }
    .no-data {
      margin-top: 40%;
    }
    /deep/ .weui-cell {
      background: #527DD9 !important;
    }
    /deep/ .weui-cells {
      margin-top: 0 !important;
    }
    /deep/ .weui-input {
      font-size: .28rem;
      text-align: center;
      background: #fff;
      border-radius: .1rem;
      height: .64rem;
    }
    ::-webkit-input-placeholder { /*Webkit browsers*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
    :-moz-placeholder { /*Mozilla Firefox 4 to 8*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
    ::moz-placeholder { /*Mozilla Firefox 19+*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
    :-ms-input-placeholder { /*Internet Explorer 10+*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }

    .overwrite-title-right {
      color: #fff;
      font-size: 0.32rem;
    }
    .list {
      margin-top: .2rem;
      background: #fff;
    }
    /deep/ .vux-tab-item {
      line-height: normal;
      font-size: .28rem;
      padding-top: 0.28rem;
    }

  }

  .shareDialog {
    position: relative;
    padding-top: .5rem;
    text-align: left;
    padding-bottom: .4rem;
    min-height: 2rem;
    .shareImgStyle {
      width: 1.84rem;
      height: 1.84rem;
      max-height: 2rem;
      position: absolute;
      left: .4rem;
      top: .5rem

    }
    .shareDialogBtn {
      width: 2.42rem;
      height: .66rem;
      line-height: .66rem;
      border-radius: .33rem;
      color: #ffffff;
      background-color: #527DD9;
      margin: .3rem auto 0 auto;
      text-align: center;
    }
    .rt {
      margin-left: 2.6rem;
      margin-right: .4rem;
      word-wrap: break-word;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box; //必须结合的属性，将对象作为弹性伸缩盒子模型显示
      -webkit-line-clamp: 2; //控制文本的行数
      -webkit-box-orient: vertical; //必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 
      font-size: 16px;
      font-weight: bold;

    }
  }

  /deep/ .loading-layer {
    padding-bottom: 60px;
  }

  /*/deep/ .weui-dialog {*/
  /*width: 90%;*/
  /*max-width: inherit;*/
  /*}*/
</style>
